<template>
  <at-card>
    <view @click="toPath('/work/workDetail/workDetail')">
      <view class="flex-between">
        <view>
          <view class="flex">
            <view class="fw-600">{{ data.position }}</view>
            <view class="flex ml-20">
              <at-work-tag v-for="item of data.type" :key="item" :id="item"/>
            </view>
            <view v-if="detail" style="margin-left: auto" class="f-c-9 f-s-m">{{ data.createTime }}</view>
          </view>
          <view class="money fw-600 mt-10">
            {{ data.money }}
          </view>
        </view>
        <view class="subsidy" v-if="data.isSubsidy">
          <view>补贴</view>
          <view>返{{data.subsidy}}元</view>
        </view>
      </view>
      <view class="flex mt-20" style="flex-wrap: wrap">
        <view class="work-tag" v-for="item of workCardTags" :key="item">{{ item }}</view>
      </view>
      <view class="flex f-s-m mt-10 f-c-6">
        <image :src="data.logo" mode="aspectFill" style="width: 50rpx;height: 50rpx"/>
        <view class="ml-10">{{ data.company }}</view>
        <view class="flex f-c-9" style="margin-left: auto">
          <view v-if="type===1" class="mr-10">{{ fmtDistance(data.distance) }}</view>
          <view> {{ data.address }}</view>
        </view>
      </view>
    </view>
  </at-card>
</template>

<script setup>
import {computed} from "vue";
import {fmtDistance, toPath} from "@/utils/commonUtils";

const props = defineProps(['data', 'type', 'detail'])

const workCardTags = computed(() => {
  return props.data.tag.split(',')
})
</script>

<style lang="scss" scoped>
.subsidy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, $theme-color 50%, #fff 50%);
  border-radius: 10rpx;
  border: 1rpx solid $theme-color;
  width: 120rpx;
  font-size: 24rpx;

  & > view:first-child {
    color: #fff;
  }

  & > view:last-child {
    color: $theme-color;
  }
}
</style>